<!-- TODO: need to make a decision on whether to make strict or go extensibility option -->
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -->
<meta charset="UTF-8" />
<title>Auditor</title>
<link href="css_decor/auditor.app.css" rel="stylesheet" type="text/css" />
<link href="css_decor/app/web_diff.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js_appliances/jquery.js"></script>
</head>
<body id="auditor-app">
	<div class="ui-window">
		<header class="ui-header">
			<div class="ui-logo">
				<hgroup class="titlegroup">
					<h1 class="title">Auditor</h1>
					<h2 class="subtitle">Docs quality review tools</h2>
				</hgroup>
			</div>
		</header>
		<div class="ui-screen">
			<section class="ui-appview-toolbar">
				<ul class="ui-appview-tools">
				</ul>
			</section>
			<section class="ui-workspace">
				<div class="ui-widget" id="webdiff-plugin">
					<div class="ui-logo">
						<hgroup class="titlegroup">
							<h1 class="title">WebDiff</h1>
							<h2 class="subtitle">for Publican DocBook</h2>
						</hgroup>
					</div>
					<div id="dest-doc">
						<h3 class="form-label">Destination Document</h3>
						<div class="frontforms">
							<ul class="tabset_tabs">
								<li class="selected"><a id="dest_input_from_uri"
									href="#CNl30r"> <span>Review by</span> URI
								</a></li>
								<li><a id="dest_input_from_upload" href="#v45yQ"> <span>Review
											by</span> File Upload
								</a></li>
								<li><a id="dest_input_from_input" href="#ONC48e"> <span>Review
											by</span> Direct Input
								</a></li>
							</ul>
							<div class="fields">
								<fieldset id="dest-input-from-uri" class="tabset_content front">
									<legend class="tabset_label">Review document by URI</legend>
									<form action="check" method="get">
										<p class="instructions">Review an online document:</p>
										<p>
											<label for="dest_uri" title="Address of page to Validate">Address:</label>
											<input class="uri" id="dest_uri" type="text" size="45"
												name="dest_uri">
										</p>
									</form>
								</fieldset>
								<fieldset id="dest-input-from-upload"
									class="tabset_content front" style="display: none;">
									<legend class="tabset_label">Review document by File
										Upload</legend>
									<form action="check" enctype="multipart/form-data"
										method="post">
										<p class="instructions">Upload the document for review:</p>
										<p>
											<label for="dest_uploaded_file"
												title="Choose a Local File to Upload and Validate">File:</label>
											<input class="uploaded_file" id="dest_uploaded_file"
												type="file" size="30" name="dest_uploaded_file">
										</p>
										<p class="field-info-note">
											<strong>Note</strong>: file upload may not work with Internet
											Explorer on some versions of Windows XP Service Pack 2, see
											our <a
												href="http://www.w3.org/QA/2005/01/Validator-IE_WinXP_SP2">information
												page</a> on the W3C QA Website.
										</p>
									</form>
								</fieldset>
								<fieldset id="dest-input-from-input"
									class="tabset_content front" style="display: none;">
									<legend class="tabset_label">Review document by direct
										input</legend>
									<form action="check" enctype="multipart/form-data"
										method="post">
										<p class="instructions">
											<label for="dest_fragment"
												title="Paste a complete (HTML) Document here">Enter
												the Markup for the document under review</label> : <br>
										</p>
										<p>
											<textarea class="fragment" id="dest_fragment" cols="80"
												rows="12" name="dest_fragment"></textarea>
										</p>
									</form>
								</fieldset>
							</div>
						</div>
					</div>
					<div id="source-doc">
						<h3 class="form-label">Source Document</h3>
						<div class="frontforms">
							<ul class="tabset_tabs">
								<li class="selected"><a id="source_input_from_uri"
									href="#qconSDF"> <span>Review by</span> URI
								</a></li>
								<li><a id="source_input_from_upload" href="#SXMun34"> <span>Review
											by</span> File Upload
								</a></li>
								<li><a id="source_input_from_input" href="#M8gzOE"> <span>Review
											by</span> Direct Input
								</a></li>
							</ul>
							<div class="fields">
								<fieldset id="source-input-from-uri"
									class="tabset_content front">
									<legend class="tabset_label">Review document by URI</legend>
									<form action="check" method="get">
										<p class="instructions">Review an online document:</p>
										<p>
											<label for="source_uri" title="Address of page to Validate">Address:</label>
											<input class="uri" id="source_uri" type="text" size="45"
												name="source_uri">
										</p>
									</form>
								</fieldset>
								<fieldset id="source-input-from-upload"
									class="tabset_content front" style="display: none;">
									<legend class="tabset_label">Review document by File
										Upload</legend>
									<form action="check" enctype="multipart/form-data"
										method="post">
										<p class="instructions">Upload the document for review:</p>
										<p>
											<label for="source_uploaded_file"
												title="Choose a Local File to Upload and Validate">File:</label>
											<input class="uploaded_file" id="source_uploaded_file"
												type="file" size="30" name="source_uploaded_file">
										</p>
										<p class="field-info-note">
											<strong>Note</strong>: file upload may not work with Internet
											Explorer on some versions of Windows XP Service Pack 2, see
											our <a
												href="http://www.w3.org/QA/2005/01/Validator-IE_WinXP_SP2">information
												page</a> on the W3C QA Website.
										</p>
									</form>
								</fieldset>
								<fieldset id="source-input-from-input"
									class="tabset_content front" style="display: none;">
									<legend class="tabset_label">Review document by direct
										input</legend>
									<form action="check" enctype="multipart/form-data"
										method="post">
										<p class="instructions">
											<label for="source_fragment"
												title="Paste a complete (HTML) Document here">Enter
												the Markup for the document under review</label> : <br>
										</p>
										<p>
											<textarea class="fragment" id="source_fragment" cols="80"
												rows="12" name="source_fragment"></textarea>
										</p>
									</form>
								</fieldset>
							</div>
						</div>
					</div>
					<div class="ui-input-field submit_button">
						<input type="submit" value="Check"
							title="Submit documents for diffing" style="display: none;">
						<a class="ui-input ui-button submit" href="#">Begin Review</a>
					</div>
					<script type="text/javascript">
						"use strict";

						var selected = "selected",

						swapTo = function(id, a) {
							var parent, tabs, forms, current, target;
							parent = $(a).parents(".frontforms");
							tabs = parent.children(".tabset_tabs");
							forms = parent.children(".fields");
							current = forms.children(".tabset_content:visible");
							if (current && current.attr("id") === id) {
								// already selected, don't need to do anything
								return true;
							} else {
								// collapse the currently open form
								current.css({
									"display" : "none",
									"visibility" : "hidden",
									"opacity" : 0
								});
								// expand the target form
								target = $("#" + id).css({
									"display" : "block",
									"visibility" : "visible",
									"opacity" : 1
								});
								var targetTab, selectedTab;
								selectedTab = tabs.children(".selected");
								selectedTab.toggleClass(selected);
								targetTab = $(a).parent().toggleClass(selected);
							}
						},

						bindUITabHandlers = function(tabAndFormSelectors) {
							$.each(tabAndFormSelectors, function(tab, form) {
								$("#" + tab).bind("click", function(e) {
									swapTo(form, this);
								});
							});
						};

						bindUITabHandlers({
							"dest_input_from_uri" : "dest-input-from-uri",
							"dest_input_from_upload" : "dest-input-from-upload",
							"dest_input_from_input" : "dest-input-from-input"
						});

						bindUITabHandlers({
							"source_input_from_uri" : "source-input-from-uri",
							"source_input_from_upload" : "source-input-from-upload",
							"source_input_from_input" : "source-input-from-input"
						});
					</script>
				</div>
				<div class="ui-widget" id="auditor-contents"></div>
			</section>
			<section class="under-foot"></section>
		</div>
		<footer class="ui-footer">
			<div class="ui-footnotes"></div>
		</footer>
	</div>
	<script type="text/javascript" src="js_appliances/auditor.web_diff.js"></script>
	<script type="text/javascript" src="js_appliances/auditor.app.js"></script>
</body>
</html>